<template>
  <div class="cardMain">
    <img class="gameBackgroundImage" src="../../../assets/gameBackgoundImages/今日运势.png"/>
    
    <!-- 遮罩层，初始状态为隐藏 -->
    <div class="overlay">
        今日运势
    </div>
  </div>
</template>

<script setup>
import { defineProps,onMounted,computed  } from 'vue';
 
// 使用 defineProps 来接收父组件传递的 props
const props = defineProps({
  gameName: {
    type: String,
    required: false
  }
});
const gameNameWithDefault = computed(() => props.gameName || '今日运势');
onMounted(() => {
  console.log(props.gameName||"默认值")
})
</script>

<style lang="scss" scoped>
.cardMain {
    position: relative;
    display: inline-block;
    height: 18rem;
    width: 12rem;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 
    0 0 10px 0 rgba(100, 100, 100, 0.8), /* 绿色发光边框，透明度0.5 */
    0 0 20px 0 rgba(100, 100, 100, 0.5), /* 再次添加绿色发光边框，增加模糊半径以增强效果 */
    0 0 30px 0 rgba(100, 100, 100, 0.4); /* 稍淡的绿色发光边框，进一步增加模糊半径 */
    border: 2px;
    transition: all 0.15s linear;
    display: flex;
    align-items: center;
    justify-content: center;
    .gameBackgroundImage {
        width: 100%;
        height: 100%;
        border-radius: 20px;
    }
    .overlay {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: rgba(0, 0, 0, 0.5); /* 遮罩层背景色，半透明黑色 */
        color: #fff; /* 文字颜色 */
        display: flex;
        align-items: center;
        justify-content: center;
        opacity: 0; /* 初始状态为透明 */
        transition: all 0.15s linear;
        font-size: 26px;
    }
}
.cardMain:hover {
    transform: scale(1.08);
    // box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
    box-shadow: 
    0 0 10px 0 rgba(100, 100, 100, 0.8), /* 绿色发光边框，透明度0.5 */
    0 0 20px 0 rgba(100, 100, 100, 0.8), /* 再次添加绿色发光边框，增加模糊半径以增强效果 */
    0 0 30px 0 rgba(100, 100, 100, 0.5); /* 稍淡的绿色发光边框，进一步增加模糊半径 */
}
.cardMain:hover .overlay {
  opacity: 1; /* 鼠标移入时显示遮罩层 */
}
</style>